﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .mycol {
            float: left;
            height: 100%;
            border: 1px solid #DDDDDD;
            padding: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 5px;
        }
        .blocktag {
            border: 1px solid gray;
            border-radius: 5px;
        }
        .mycontain {
            margin-right: auto;
            margin-left: auto;
        }
        .mytable {
            border-top: 2px solid #ddd;
            padding-top: 5px;
            margin-bottom: 5px;
            margin-top: 5px;
            background-color: #fff;
        }
        .myinput {
            margin-right: 5px;
        }
        .leftcomponent {
            list-style: none;
        }
        .eledrag{
            cursor:move;
        }
        .eledrop{
            padding: 10px;
        } 
        .minimal {
            min-height: 30px;
            min-width: 100px;
            border: 1px solid #DDDDDD;
            margin: 10px;
            padding:10px;
        }
        .focus {
            border: 1px solid Red;
        }
        .active > a {
            background-color: White;
            color: #1A6AA5;
        }

    </style>
    <script src="~/Scripts/jquery-2.1.0.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-3.0.0.js"></script>
    <script type="text/javascript" src="/Scripts/q.js"></script>
    <script type="text/javascript" src="/Scripts/breeze.min.js"></script>

    <script src="~/Scripts/htmlHandle/viewModel.js"></script>
    <script src="~/Scripts/htmlHandle/structureHandle.js"></script>
    <script src="~/Scripts/htmlHandle/layoutHandle.js"></script>

</head>
<body>    
    <nav style="background-color: #1A6AA5; color: White;" class="navbar" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-brand">
                <span class="glyphicon glyphicon-th-large"></span>
                <span>                   
                    AppDesign Tool v1.0
                </span>
                
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" style="color: White;">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#one" data-toggle="tab">
                        <span class="glyphicon glyphicon-align-left"></span> Type Structure</a>
                    </li>
                    <li><a href="#two" data-toggle="tab">
                            <span class="glyphicon glyphicon-list-alt"></span> Type Layout</a>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div id="_loading" style="text-align: center">
        <img src="~/Content/bg_loader.gif" />
    </div>
    <div class="mycontain" style="width: 100%; display:none">
        <div class="clearfix">
            <div id="leftcol" class="col-md-2 column" style="padding-left:0; padding-right:0px;">                   
                <ul style="list-style: none;    ">
                    <li>
                        <span class="label label-primary">Domain Object</span>
                        <ul class="leftcomponent list-group" data-bind="foreach : DomainTypes">
                            <li class="list-group-item list-group-item-info">
                                <div>
                                    <span data-bind="text: ObjName, click: vm.clickDomTypes"></span>
                                </div>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <span class="label label-primary">Application object</span>                     
                        <ul class="leftcomponent list-group" data-bind="foreach : AppTypes">
                            <li class="list-group-item list-group-item-info">
                                <div>
                                    <span style="cursor:move" data-bind="text: ObjName, event:{ mouseup: vm.clickAppTypes}, draggable: true"></span>
                                    <button class="btn btn-xs btn-default" style="float:right; font-weight:bold" data-bind="click: vm.delAppType "><span class="glyphicon glyphicon-minus"></span></button>
                                </div>

                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div class="col-md-10" style="padding-right:0; padding-left:0px">
                <div class="tabbable">
                    <div class="tab-content">
                        <div class="tab-pane active" id="one">
                            <div id="mainstructure" class="col-md-4" style="padding-left:5px; padding-right:5px">
                                <div class=" panel panel-primary" style="min-height: 500px; width: 100%">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">
                                            <span class="glyphicon glyphicon-eye-open"></span>
                                            Structure&nbsp;
                                            <button onclick="refreshStructure()" title="Refresh to view changes" class="btn btn-primary btn-xs">
                                                <span class="glyphicon glyphicon-refresh"></span>
                                            </button>                                                                                       
                                        </h3>
                                        
                                    </div>
                                    <div class="panel-body" style="padding:5px">
                                        <div id="structureView" style="min-height: 500px">

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div id="createStruc" class="col-md-8" style="min-height: 500px; padding-left: 0;  ">
                                <div class="panel-group" id="accordion">
                                    <div id="editAreaParent" class="panel panel-primary">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                                    <span class="glyphicon glyphicon-edit"></span>
                                                    Edit
                                                </a>&nbsp;
                                                <button data-bind="click: $data.saveEntity" title="Save changes on this type" class="btn btn-primary btn-xs">
                                                    <span class="glyphicon glyphicon-floppy-disk"></span>
                                                </button>&nbsp;
                                                <button data-bind="click: $data.rejectChanges" title="Undo all changes" class="btn btn-primary btn-xs">
                                                    <span class="glyphicon glyphicon-floppy-remove"></span>
                                                </button>
                                            </h4>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse in">
                                            <div class="panel-body" style="padding:5px;">
                                                <div id="editArea" style="min-height: 500px">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                                    <span class="glyphicon glyphicon-plus"></span>
                                                    New type
                                                </a>&nbsp;
                                                <button title="Save this new type" class="btn btn-primary btn-xs">
                                                    <span class="glyphicon glyphicon-floppy-disk"></span>
                                                </button>
                                            </h4>
                                        </div>
                                        <div id="collapseTwo" class="panel-collapse collapse">
                                            <div class="panel-body" style="min-height: 465px;">
                                                <div class="mytable" style="width:100%">
                                                    <div class="input-group pull-left myinput">
                                                        <input class="form-control" id="typename" type="text" placeholder="Type name" />
                                                    </div>
                                                    <button class="btn btn-sm btn-default" onclick="addType(this)">
                                                        <span class="glyphicon glyphicon-plus"></span>
                                                    </button>
                                                    <button class="btn btn-sm btn-default" onclick="delType(this)">
                                                        <span class="glyphicon glyphicon-minus"></span>
                                                    </button>
                                                    <table id="newType" style="clear:both;">
                                                        <tr>
                                                            <th>Attribute</th>
                                                            <th>Access Modify</th>
                                                            <th>Relation</th>
                                                            <th>Property Type</th>
                                                            <th>Property Name</th>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <select class="form-control">
                                                                    <option>None</option>
                                                                    <option>Key</option>
                                                                    <option>Foreign Key</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <select class="form-control">
                                                                    <option>Public</option>
                                                                    <option>Private</option>
                                                                    <option>Protected</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <select class="form-control">
                                                                    <option>One</option>
                                                                    <option>ICollection</option>
                                                                </select>
                                                            </td>
                                                            <td>
                                                                <select class="form-control" id="selectType" data-bind="options: AllTypes,
                                                   optionsText: 'ObjName',
                                                   optionsValue: 'UniqueId',
                                                   optionsCaption: 'Choose...'"></select>
                                                            </td>
                                                            <td>
                                                                <div class="input-group pull-left myinput">
                                                                    <input class="form-control" type="text" placeholder="Property Name" />
                                                                </div>
                                                                <button class="btn btn-xs btn-default" onclick="addProp(this)">
                                                                    <span class="glyphicon glyphicon-plus"></span>
                                                                </button>
                                                                <button class="btn btn-xs btn-default" onclick="delProp(this)">
                                                                    <span class="glyphicon glyphicon-minus"></span>
                                                                </button>

                                                            </td>
                                                        </tr>
                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="tab-pane" id="two">
                            <div class="col-md-2" style="margin-top:5px" data-bind="visible: TypeObser">
                                <span class="label label-primary">Basic component</span>
                                <ul id="items" class="list-group">

                                    <li class="list-group-item list-group-item-info">
                                        <span style="cursor:move" class="basic" data-bind="draggable: true">div</span>
                                    </li>
                                    <li class="list-group-item list-group-item-info">
                                        <span style="cursor:move" class="basic" data-bind="draggable: true">input</span>
                                    </li>
                                    <li class="list-group-item list-group-item-info">
                                        <span style="cursor:move" class="basic" data-bind="draggable: true">textarea</span>
                                    </li>
                                </ul>
                                <span class="label label-primary">Advance component</span>
                                <ul id="items" class="list-group" data-bind="foreach: AdvanceCom">
                                    <li class="list-group-item list-group-item-info">
                                        <span style="cursor:move" class="advance" data-bind="draggable: true, text: AppTypesChild().ObjName()"></span>
                                        <select data-bind="options: AppTypesChild().AppLayouts(),
                                           optionsText: 'LayoutName',
                                             optionsValue: 'UniqueId'"></select>
                                    </li>
                                </ul>

                                <button class="btn btn-default" onclick="clearLayout()">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    Clear
                                </button>
                                <button class="btn btn-default" onclick="saveLayout()">
                                    <span class="glyphicon glyphicon-saved"></span>
                                    Save
                                </button>

                            </div>
                            <div class="col-md-8">
                                <div class="panel panel-default" data-bind="visible: TypeObser">
                                    <div class="panel-body">
                                        <span data-bind="text: TypeObser.ObjName">Father</span> type
                                        <select id="selectedlay" class="form-control" style="display: inline-block"
                                                data-bind="options: vm.TypeObser.AppLayouts,
                                           optionsText: 'LayoutName',
                                            optionsValue: 'UniqueId',
                                            value: SelectedLayout,
                                           optionsCaption: 'New'"></select>
                                    </div>
                                </div>
                                <div id="contain" class="col-md-12 eledrop" style="min-height: 500px">


                                </div>
                            </div>
                            <div class="col-md-2" style="border: 1px solid #dddddd; padding:5px;">
                                <div class="navbar-brand col-md-12" style="border-bottom: 1px solid #DDD">
                                    <span>Properties</span>
                                    <button title="Remove selected component" class="btn btn-default" onclick="removeComponent()">
                                        <span class="glyphicon glyphicon-trash"></span>
                                    </button>
                                </div>
                                <table>
                                    <tr>
                                        <th>Name</th>
                                        <th>Value</th>
                                    </tr>
                                    <tr>
                                        <td>Height</td>
                                        <td>
                                            <div class="input-group pull-left myinput">
                                                <input class="form-control" type="text" id="_height" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Width</td>
                                        <td>
                                            <div class="input-group pull-left myinput">
                                                <input class="form-control" type="text" id="_width" />
                                            </div>
                                        </td>
                                    </tr>
                                </table>

                            </div>





                        </div>
                    </div>
                </div>

            </div>
                   
        @RenderBody() 


    </div>
       </div> 


    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
